<template>
  <div class="custom_more">
    <div class="custom_more_content">
      <slot name="moreContent" :item="data"></slot>
    </div>
    <div class="custom_more_button">
      <div
        class="custom_more_beforeloading"
        v-if="!isEnd && !isError && !loading"
        @click="loadingClickHandle"
      >
        {{ $t("lang.点击加载更多") }}
      </div>

      <div class="custom_more_loading" v-if="!isEnd && !isError && loading">
        <div class="custom_more_loading_content">
          <div class="custom_more_loading_left">
            <slot name="loadingIcon"></slot>
          </div>
          <div class="custom_more_loading_right">{{ $t("lang.加载中") }}</div>
        </div>
      </div>
      <div class="custom_more_loadingend" v-if="isEnd">
        {{ $t("lang.我是有底线的") }}
      </div>
      <div class="custom_more_loadingerror" v-if="isError">
        {{ $t("lang.出错了") }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "more",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      data: [],
      loading: false,
      isEnd: false,
      isError: false,
    };
  },
  created() {
    this.data = this.$props.item.data;
  },
  methods: {
    loadingClickHandle() {
      this.getMoreData();
    },
    getMoreData() {
      const that = this;
      if (!that.loading) {
        that.loading = true;
        that.$parent.$emit(
          "getMoreData",
          function(v) {
            if (v.data.length === 0) {
              that.isError = false;
              that.isEnd = true;
              that.loading = false;
              return;
            }
            that.data = that.data.concat(v.data);
            that.isError = false;
            that.isEnd = false;
            that.loading = false;
          },
          function(v) {
            console.log(v);
            that.isEnd = false;
            that.isError = true;
            that.loading = false;
          }
        );
      }
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_more {
  .custom_more_content {
  }
  .custom_more_button {
    color: #999;
    font-size: (14 / @base);
    padding: (10 / @base);
    .custom_more_loadingend {
    }
    .custom_more_loadingerror {
      color: #ce1212;
    }
    .custom_more_beforeloading {
    }
    .custom_more_loading {
      .custom_more_loading_content {
        width: 30%;
        display: flex;
        margin: 0 auto;
        .custom_more_loading_left {
        }
        .custom_more_loading_right {
          margin: 0 0 0 (10 / @base);
        }
      }
    }
  }
}
</style>
